<html>
<head>
    <meta charset="utf-8">
    <title>各大城市天气实况页面</title>
    <style>
    /* 基础样式重置 */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', system-ui, sans-serif;
    }

    body {
        background: #f0f4f8;
        padding: 2rem 1rem;
    }

    /* 表格容器 */
    .table-container {
        max-width: 1200px;
        margin: 0 auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        min-width: 800px;
    }

    caption {
        font-size: 1.5rem;
        font-weight: 600;
        color: #2d3748;
        padding: 1.5rem;
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
        border-radius: 12px 12px 0 0;
    }

    th,
    td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid #e2e8f0;
    }

    thead {
        background-color: #f7fafc;
    }

    thead th {
        font-weight: 600;
        color: #4a5568;
        border-bottom: 2px solid #cbd5e0;
    }

    tbody tr:hover {
        background-color: #f8fafc;
    }

    tbody tr:nth-child(even) {
        background-color: #f7fafc;
    }

    /* 输入框样式 */
    input[type="text"] {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #cbd5e0;
        border-radius: 6px;
        transition: all 0.2s;
    }

    input[type="text"]:focus {
        outline: none;
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
    }

    /* 按钮样式 */
    .btn {
        padding: 8px 16px;
        background: #4299e1;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 14px;
    }

    .btn:hover {
        background: #3182ce;
        transform: translateY(-1px);
    }

    /* 加载动画 */
    .loading {
        text-align: center;
        padding: 2rem;
        color: #718096;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .spinner {
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 3px solid #cbd5e0;
        border-radius: 50%;
        border-top-color: #4299e1;
        animation: spin 1s linear infinite;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .table-container {
            border-radius: 8px;
        }
        
        caption {
            font-size: 1.2rem;
            padding: 1rem;
        }
        
        th, td {
            padding: 10px 12px;
        }
    }
    </style>
    <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <table>
        <caption>各大城市天气实时数据</caption>
        <thead>
            <tr>
                <th>城市</th>
                <th>天气现象</th>
                <th>风向</th>
                <th>风力</th>
                <th>气温</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

</body>

</html>


<script>
    window.onload = function () {
        $.ajax({
            url: "http://localhost:8080/weather/all",
            type: "get",
            dataType: "json",
            success: function (resp) {
                console.log(JSON.stringify(resp))
                if (resp.code != null && resp.code == 0) {
                    //后台服务返回成功
                    $.each(resp.data, function (index, info) {
                        var tr = "<tr id='trID" + info.id + "'>" +
                            "<td>"+info.city+"</td>" +
                            "<td><input type='text' value='"+info.weather+"'/></td>" +
                            "<td><input type='text' value='"+info.wind_dir+"'/></td>" +
                            "<td><input type='text' value='"+info.wind_class+"'/></td>" +
                            "<td><input type='text' value='"+info.temp+"'/></td>" +
                            "<td>"+info.update_time+"</td>" +
                            "<td><input type='button' onclick='sub("+info.id+")' value='修改'/></td>" +
                            "</tr>";
                        $("tbody").append(tr);
                    })
                } else {
                    //接口返回失败
                    alert("ajax获取天气数据失败：" + resp.msg)
                }
            }
        })
    }
    function sub(id) {
        var city = $("#trID" + id)[0].cells[0].textContent;
        var weather = $("#trID" + id)[0].cells[1].children[0].value;
        var wind_dir = $("#trID" + id)[0].cells[2].children[0].value;
        var wind_class = $("#trID" + id)[0].cells[3].children[0].value;
        var temp = $("#trID" + id)[0].cells[4].children[0].value;
        /*        alert(city + " 天气：" + weather + " 风向：" + wind_dir + " 风力：" + wind_class +
        " 气温：" + temp);
                window.location.href = "manage?id="+id+"&city="+city+"&weather="+weather+"&wind_dir="+wind_dir+"&wind_class="+wind_class+"&temp="+temp*/

        // TODO: 使用ajax
        $.ajax({
            url: "http://localhost:8080/weather/update",
            type: "post",
            data: JSON.stringify({
                "id": id,
                "city": city,
                "weather": weather,
                "wind_dir": wind_dir,
                "wind_class": wind_class,
                "temp": temp
            }),
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (resp) {
                console.log(JSON.stringify(resp)) //浏览器控制台可以查看
                if (resp.code != null && resp.code == 0) {
                    //后台服务返回成功
                    alert("修改成功！城市：" + resp.data.city)
                    $("#trID" + id)[0].cells[5].textContent = resp.data.update_time;
                } else {
                    //接口返回失败
                    alert("修改失败！" + resp.msg)
                }

            },
            error: function (errmsg) {
                console.log("ajax返回错误: " + JSON.stringify(errmsg))
                alert("修改失败！")
            }
        })
    }
</script>